<template>
  <div class="mail-list-page">
    <div class="mail-list-page-toolbar toolbar-2col">
      <div class="left-wrap">
        <div class="xmail-ui-checkbox ui-checkbox-disabled select-all">
          <div class="ui-checkbox-icon-uncheck"></div>
        </div>

        <div class="toolbar-title">
          <span class="toolbar-folder-name">已删除</span>
          <div class="mail-list-page-filter-btn">
            <div class="filter-btn-inner">
              <span
                class="xmail-ui-icon btn-icon"
                style="width: 16px; height: 20px"
              >
                <span>^</span>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="right-wrap">
        <div class="xmail-ui-ellipsis-toolbar">
          <div class="ui-ellipsis-toolbar-btns">
            <div
              class="xmail-ui-btn ui-btn-size32 ui-btn-border ui-btn-them-clear-gray"
              style="margin-right: 8px"
              @click="deleteForever"
            >
              <span
                class="xmail-ui-icon ui-btn-icon"
                style="width: 20px; height: 20px"
              >
                <i>🚮</i>
              </span>
              <div class="ui-btn-text">彻底删除</div>
            </div>

            <!-- <div
              class="xmail-ui-btn ui-btn-size32 ui-btn-border ui-btn-them-clear-gray"
              style="margin-right: 8px"
            >
              <span
                class="xmail-ui-icon ui-btn-icon"
                style="width: 20px; height: 20px"
              >
                <i>➥</i>
              </span>
              <div class="ui-btn-text">转发</div>
            </div> -->
            <!-- <div
              class="xmail-ui-btn ui-btn-size32 ui-btn-border ui-btn-them-clear-gray"
              style="margin-right: 8px"
            >
              <span
                class="xmail-ui-icon ui-btn-icon"
                style="width: 20px; height: 20px"
              >
                <i>📃</i>
              </span>
              <div class="ui-btn-text">全部已读</div>
            </div> -->
            <div
              class="xmail-ui-btn ui-btn-size32 ui-btn-border ui-btn-them-clear-gray"
              style="margin-right: 8px"
            >
              <span
                class="xmail-ui-icon ui-btn-icon"
                style="width: 20px; height: 20px"
              >
                <i>⭐</i>
              </span>
              <div class="ui-btn-text">点击邮件右侧可以添加星标邮件哦~</div>
            </div>
            <!-- <div
              class="xmail-ui-btn ui-btn-size32 ui-btn-border ui-btn-them-clear-gray"
              style="margin-right: 8px"
            >
              <span
                class="xmail-ui-icon ui-btn-icon"
                style="width: 20px; height: 20px"
              >
                <i></i>
              </span>
              <div class="ui-btn-text">移动到</div>
              <span
                class="xmail-ui-icon ui-btn-down-icon"
                style="width: 8px; height: 6px; color: var(--base_gray_050)"
              >
                <i></i>
              </span>
            </div> -->
          </div>

          <div class="ui-ellipsis-toolbar-more" style="width: 121px"></div>
        </div>

        <div class="mail-list-page-toolbar-mail-total">
          <div
            class="xmail-ui-btn ui-btn-size32 ui-btn-them-clear-gray mail-total-btn"
          >
            <div class="ui-btn-text">共 {{ filteredSentEmails.length }} 封</div>
            <span
              class="xmail-ui-icon ui-btn-down-icon"
              style="width: 8px; height: 6px; color: var(--base_gray_050)"
            >
              <i></i>
            </span>
          </div>
        </div>

        <div
          class="xmail-ui-btn ui-btn-size32 ui-btn-them-clear-gray ui-btn-only-icon"
          style="margin-left: 4px"
        >
          <span
            class="xmail-ui-icon ui-btn-icon"
            style="width: 20px; height: 20px"
          >
            <i>🚪</i>
          </span>
        </div>
      </div>
    </div>
    <div class="mail-list-page-body">
      <div class="mail-list-page-items" v-if="!selectedEmail">
        <!-- 原放点 -->
        <div class="mail-list-page-items-inner">
          <div class="xmail-ui-float-scroll">
            <div class="ui-float-scroll-body" tabindex="0">
              <div
                class="mail-list-page-item mail-list-item-compact mail-list-page-wide-item"
                v-for="email in filteredSentEmails"
                :key="email.id"
              >
                <div class="not-shrink wide-mode-left-wrap">
                  <div
                    class="xmail-ui-checkbox mail-checkbox"
                    :class="{ 'is-checked': email.isChecked }"
                    @click="toggleEmailSelection(email)"
                  >
                    <div
                      :class="{
                        'ui-checkbox-icon-uncheck': !email.isChecked,
                        'ui-checkbox-icon-checked': email.isChecked,
                      }"
                    ></div>
                  </div>
                  <div class="mail-sender mail-unread">
                    <div class="mail-list-page-mail-icon">
                      <span
                        class="xmail-ui-icon"
                        style="width: 20px; height: 20px"
                        >✉</span
                      >
                    </div>
                    <div class="senders-list">
                      <div class="xmail-cmp-account cmp-account-style-none">
                        <div class="cmp-account-wrap">
                          <div class="cmp-account-inner">
                            <span class="cmp-account-nick">{{
                              email.sender_name
                            }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="mail-text">
                  <span
                    class="mail-subject mail-unread"
                    @click="selectEmail(email)"
                    >{{ email.subject }}</span
                  >
                  <span class="mail-digest">{{ email.content }}</span>
                </div>

                <div class="not-shrink"></div>

                <div class="not-shrink"></div>

                <div class="not-shrink">
                  <div class="mail-time mail-unread">{{ email.send_at }}</div>
                  <div
                    class="xmail-ui-btn ui-btn-size24 ui-btn-them-clear-gray ui-btn-only-icon"
                  >
                    <span
                      class="xmail-ui-icon ui-btn-icon"
                      style="
                        width: 20px;
                        height: 20px;
                        color: var(--base_gray_050);
                      "
                    >
                      ☆
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div></div>
          </div>
        </div>
      </div>

      <div class="mail-list-page-reader is-scrolled" v-if="selectedEmail">
        <div class="xmail-ui-float-scroll">
          <div class="ui-float-scroll-body mail-reader-body" tabindex="0">
            <div class="mail-list-page-reader-body reader-body-children">
              <!-- 显示选中邮件的主题和内容 -->
              <div v-if="selectedEmail" class="mail-detail-subject">
                <span class="mail-subject-text">{{
                  selectedEmail.subject
                }}</span>
              </div>

              <div v-if="selectedEmail" class="mail-detail-basic">
                <div class="basic-body">
                  <div class="basic-body-item">
                    <div
                      class="xmail-cmp-account cmp-account-show-email cmp-account-nick-bold"
                    >
                      <div class="cmp-account-wrap">
                        <div class="cmp-account-inner">
                          <span class="cmp-account-email">发件人：</span>
                          <span class="cmp-account-nick">{{
                            selectedEmail.sender_name
                          }}</span>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="basic-body-item">
                    <div class="basic-item-name" style="width: 45px">
                      收件人
                    </div>

                    <div
                      class="xmail-cmp-accounts-ellipsis cmp-accounts-expand"
                    >
                      <div class="xmail-cmp-account cmp-account-show-email">
                        <div class="cmp-account-wrap">
                          <div class="cmp-account-inner">
                            <span class="cmp-account-nick">我</span>
                            <span class="cmp-account-email"></span>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="basic-time-wrap">
                      <div class="time-text">{{ selectedEmail.send_at }}</div>
                      <!-- <div class="xmail-ui-hyperlink" style="margin-left: 12px; margin-right: 4px;"></div> -->
                    </div>
                  </div>
                </div>
              </div>

              <div v-if="selectedEmail" class="mail-detail-divider"></div>

              <div v-if="selectedEmail" class="mail-detail-content">
                <div class="qmbox">
                  <!-- 邮件内容 -->
                  <p>{{ selectedEmail.content }}</p>
                </div>
              </div>

              <!-- <div class="mail-detail-reply"></div> -->
            </div>
          </div>

          <div
            class="xmail-ui-float-scroll-bar ui-float-scroll-bar-vertical page-vertical-scroll-bar"
          >
            <div
              class="ui-float-scroll-thumb"
              style="height: 136.111px; top: 0px"
            ></div>
          </div>
        </div>
        <div
          class="xmail-ui-float-scroll-bar ui-float-scroll-bar-horizontal ui-float-scroll-bar-disabled content-horiz-scroll-bar"
        ></div>
      </div>
    </div>
  </div>

  <!--  -->
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, watchEffect } from "vue";
import axios from "axios";
import { useEventBus } from "@vueuse/core";

export default defineComponent({
  setup() {
    const deletedEmails = ref<any[]>([]);
    const selectedEmail = ref<any | null>(null);

    const searchQuery = ref<string>("");
    const filteredSentEmails = ref<any[]>([]);
    const { on } = useEventBus<string>("search-mail");
    const fetchDeletedEmails = async () => {
      try {
        // 从 localStorage 中获取用户信息
        const userInfoStr = localStorage.getItem("userInfo");
        if (userInfoStr) {
          const userInfo = JSON.parse(userInfoStr);
          const phone_number = userInfo.phone_number;
          const response = await axios.get(
            `http://localhost:3000/api/get-deleted-emails/${phone_number}`
          );
          deletedEmails.value = response.data.emails.map((email: any) => ({
            ...email,
            isChecked: false,
          }));
        }
      } catch (error) {
        console.error("获取已删除邮件失败", error);
      }
    };

    const toggleEmailSelection = (email: any) => {
      email.isChecked = !email.isChecked;
    };

    const deleteForever = async () => {
      const checkedEmails = deletedEmails.value.filter(
        (email) => email.isChecked
      );
      if (checkedEmails.length > 0) {
        try {
          const emailIds = checkedEmails.map((email) => email.id);
          await axios.post("http://localhost:3000/api/delete-forever", {
            emailIds,
          });
          deletedEmails.value = deletedEmails.value.filter(
            (email) => !email.isChecked
          );
        } catch (error) {
          console.error("彻底删除邮件失败", error);
        }
      }
    };

    const selectEmail = (email: any) => {
      selectedEmail.value = email;
    };

    const filterEmails = () => {
      if (searchQuery.value) {
        filteredSentEmails.value = deletedEmails.value.filter((email) =>
          email.subject.includes(searchQuery.value)
        );
      } else {
        filteredSentEmails.value = deletedEmails.value;
      }
    };

    onMounted(() => {
      fetchDeletedEmails();
    });

    watchEffect(() => {
      filterEmails();
    });

    on((query) => {
      searchQuery.value = query;
    });

    return {
      deletedEmails,
      toggleEmailSelection,
      deleteForever,
      selectEmail,
      selectedEmail,
      filteredSentEmails,
    };
  },
});
</script>

<style scoped>
.mail-list-page {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  flex-grow: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.mail-list-page-toolbar {
  flex-shrink: 0;
  display: flex;
  height: 48px;
}

.mail-list-page-toolbar .left-wrap {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding-right: 12px;
  box-sizing: border-box;
}

.mail-list-page-toolbar.toolbar-2col .left-wrap {
  width: 274px;
}

.xmail-ui-checkbox.ui-checkbox-disabled {
  opacity: 0.3;
  --uncheck-bg: var(--base_gray_010);
  --uncheck-border: var(--base_gray_050);
}

.mail-list-page-toolbar .select-all {
  height: 100%;
  width: 44px;
  padding-left: 18px;
  box-sizing: border-box;
}

.xmail-ui-checkbox {
  --uncheck-bg: transparent;
  --uncheck-border: var(--base_gray_040);
  --checked-color: var(--theme_primary);
  flex-shrink: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.xmail-ui-checkbox .ui-checkbox-icon-uncheck {
  width: 16px;
  height: 16px;
  border: 1px solid var(--uncheck-border);
  border-radius: 2px;
  box-sizing: border-box;
  background: var(--uncheck-bg);
}

.mail-list-page-toolbar .toolbar-title {
  flex-grow: 1;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

.mail-list-page-toolbar .toolbar-folder-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: var(--base_gray_100);
}

.mail-list-page-filter-btn {
  --bg: transparent;
  --hover-bg: var(--base_gray_005);
  --active-bg: var(--base_gray_010);
  --text-color: var(--base_gray_100);
  --icon-color: var(--base_gray_080);
  display: inline-flex;
  overflow: hidden;
  cursor: pointer;
  height: 32px;
  min-width: 32px;
  padding: 0 8px;
  box-sizing: border-box;
  border-radius: 4px;
  background: var(--bg);
  margin-left: 6px;
}

.mail-list-page-filter-btn .filter-btn-inner {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

.mail-list-page-filter-btn .btn-icon {
  color: var(--icon-color);
}

.xmail-ui-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mail-list-page-toolbar .right-wrap {
  flex-grow: 1;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  padding-right: 16px;
  box-sizing: border-box;
}

.xmail-ui-ellipsis-toolbar {
  flex-grow: 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}

.xmail-ui-ellipsis-toolbar .ui-ellipsis-toolbar-btns {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.xmail-ui-btn.ui-btn-size32 {
  font-size: 14px;
  line-height: 20px;
  height: 32px;
  min-width: 32px;
  padding: 0 calc(8px - var(--border-width));
  border-radius: 4px;
}

.xmail-ui-btn.ui-btn-them-clear-gray {
  --border-color: var(--base_gray_010);
}

.xmail-ui-btn.ui-btn-border {
  --border-width: 1px;
}

.xmail-ui-btn {
  --base-bg: transparent;
  --front-bg: transparent;
  --hover-front-bg: var(--base_gray_005);
  --active-front-bg: var(--base_gray_010);
  --color: var(--base_gray_100);
  --icon-color: var(--base_gray_080);
  --border-width: 0px;
  --border-color: transparent;
  --icon-margin: 4px;
  --shadow: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  color: var(--color);
  border: var(--border-width) solid var(--border-color);
  box-sizing: border-box;
  background: var(--base-bg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.xmail-ui-btn .ui-btn-icon {
  position: relative;
  color: var(--icon-color);
  margin-right: var(--icon-margin);
}

.xmail-ui-btn .ui-btn-text {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

.xmail-ui-ellipsis-toolbar .ui-ellipsis-toolbar-more {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  width: 0;
  overflow: hidden;
}

.xmail-ui-btn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--front-bg);
}

.mail-list-page .mail-list-page-body {
  flex-grow: 1;
  display: flex;
  overflow: hidden;
  min-height: 1000px;
}

.mail-list-page-items {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 354px;
}

.mail-list-page-tips {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 24px;
}

.mail-list-page-tips .empty-tips {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--base_gray_080);
}

.mail-list-page-items-inner {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.xmail-ui-float-scroll {
  flex-grow: 1;
  position: relative;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.xmail-ui-float-scroll .ui-float-scroll-body {
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-grow: 1;
  position: relative;
  overflow: auto;
}

.mail-list-page-wide-item.mail-list-item-compact {
  --border-radius: 4px;
  height: 40px;
  padding-right: 14px;
}

.mail-list-page-wide-item {
  display: flex;
  align-items: center;
  height: 40px;
}

.mail-list-page-item {
  --bg: transparent;
  --hover-bg: var(--base_gray_005);
  --active-bg: var(--base_gray_010);
  --border-color: transparent;
  --border-radius: 6px;
  position: relative;
  cursor: pointer;
  padding-right: 11px;
  border-radius: var(--border-radius);
  border: 2px solid var(--border-color);
  box-sizing: border-box;
  background: var(--bg);
  margin: 0 4px;
}

.mail-list-page-wide-item .wide-mode-left-wrap {
  width: 268px;
  padding-right: 4px;
  box-sizing: border-box;
}

.mail-list-page-item .not-shrink {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.mail-list-page-item * {
  line-height: 20px !important;
}

.mail-list-page-item .mail-checkbox {
  flex-shrink: 0;
  position: relative;
  height: 100%;
  width: 44px;
  padding-left: 12px;
  box-sizing: border-box;
}

.mail-list-page-item .mail-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-grow: 1;
  flex-shrink: 99999;
  color: var(--base_gray_050);
  min-width: 32px;
  box-sizing: border-box;
}

.mail-list-page-item .mail-checkbox::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.mail-list-item-compact .mail-sender {
  --skeleton-height: 13px;
  font-size: 13px;
  line-height: 18px;
}

.mail-list-page-item .mail-sender {
  --sender-height: 28px;
  --skeleton-height: 14px;
  font-size: 14px;
  line-height: 20px;
  flex-grow: 1;
  display: inline-flex;
  align-items: center;
  color: var(--base_black);
  overflow: hidden;
  padding-right: 8px;
  box-sizing: border-box;
}

.mail-list-item-compact .mail-subject {
  --skeleton-height: 13px;
  font-size: 13px;
  line-height: 18px;
}

.mail-list-page-item .mail-subject {
  --skeleton-height: 13px;
  font-size: 13px;
  line-height: 20px;
  color: var(--base_black);
  box-sizing: border-box;
}

.mail-list-item-compact .mail-digest {
  font-size: 13px;
  line-height: 18px;
}

.mail-list-page-item .mail-digest {
  font-size: 14px;
  line-height: 20px;
  flex-shrink: 0;
  color: var(--base_gray_040);
  padding-left: 4px;
  box-sizing: border-box;
}

.xmail-ui-checkbox .ui-checkbox-icon-checked {
  width: 16px;
  height: 16px;
  border: 1px solid var(--checked-color);
  border-radius: 2px;
  box-sizing: border-box;
  background: yellow; /* 选中时背景颜色为黄色 */
}

.mail-list-page-reader {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 472px;
  overflow: hidden;
}

.mail-list-page-reader.is-scrolled::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  height: 1px;
  background: var(--base_gray_007);
}

.xmail-ui-float-scroll {
  flex-grow: 1;
  position: relative;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mail-list-page-reader .mail-reader-body {
  padding-bottom: 16px;
  box-sizing: border-box;
}

.xmail-ui-float-scroll .ui-float-scroll-body {
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-grow: 1;
  position: relative;
  overflow: auto;
}

.mail-list-page-reader .mail-reader-body .reader-body-children {
  padding: 10px 24px 24px 24px;
  box-sizing: border-box;
}

.mail-list-page-reader-body {
  --mail-detail-bar-margin: 20px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mail-detail-subject {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.mail-detail-subject .mail-subject-text {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--base_gray_100);
  line-height: 30px;
  vertical-align: top;
  padding-right: 8px;
}

.mail-detail-basic {
  display: flex;
  padding-top: 12px;
  box-sizing: border-box;
  overflow: hidden;
}

.mail-detail-basic .basic-body {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding-left: 14px;
  box-sizing: border-box;
  overflow: hidden;
}

.mail-detail-basic .basic-body-item {
  display: flex;
  align-items: center;
  padding-top: 4px;
  box-sizing: border-box;
  overflow: hidden;
}

.mail-detail-basic .basic-body-item * {
  line-height: 20px !important;
}

.xmail-cmp-account:not(.cmp-account-style-none) {
  font-size: 13px;
  line-height: 18px;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  --nick-color: var(--base_gray_100);
  --email-color: var(--base_gray_040);
}

.xmail-cmp-account.cmp-account-show-email {
  --account-ellipsis-color: var(--email-color);
}

.xmail-cmp-account {
  --nick-color: inherit;
  --email-color: inherit;
  --account-ellipsis-color: var(--nick-color);
  display: inline-flex;
  align-items: center;
  cursor: default;
  max-width: 100%;
  overflow: hidden;
}

.xmail-cmp-account.cmp-account-nick-bold .cmp-account-nick {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}

.xmail-cmp-account .cmp-account-inner .cmp-account-email {
  color: var(--email-color);
  padding-left: 4px;
}

.mail-detail-basic .basic-body-item:nth-child(2) {
  padding-top: 2px;
  align-items: flex-start;
}

.mail-detail-basic .basic-item-name {
  font-size: 13px;
  line-height: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  flex-shrink: 0;
  align-self: flex-start;
  white-space: nowrap;
  color: var(--base_gray_050);
  padding-right: 6px;
  box-sizing: border-box;
}

.xmail-cmp-accounts-ellipsis {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  flex-grow: 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

.xmail-cmp-accounts-ellipsis.cmp-accounts-expand {
  flex-wrap: wrap;
}

.xmail-cmp-account:not(.cmp-account-style-none) {
  font-size: 13px;
  line-height: 18px;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  --nick-color: var(--base_gray_100);
  --email-color: var(--base_gray_040);
}

.xmail-cmp-account.cmp-account-show-email {
  --account-ellipsis-color: var(--email-color);
}

.xmail-cmp-account .cmp-account-inner .cmp-account-nick {
  color: var(--nick-color);
}

.xmail-cmp-account .cmp-account-inner .cmp-account-email {
  color: var(--email-color);
  padding-left: 4px;
}

.mail-detail-basic .basic-time-wrap {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding-left: 20px;
  box-sizing: border-box;
  margin-left: auto;
}

.mail-detail-basic .time-text {
  font-size: 13px;
  line-height: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-left: auto;
  color: var(--base_gray_050);
}

.mail-detail-divider {
  flex-shrink: 0;
  height: 1px;
  background: var(--base_gray_007);
  margin-top: var(--mail-detail-bar-margin);
}

.mail-detail-content:not(.is-sub-mail) {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mail-detail-content {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  position: relative;
  flex-shrink: 0;
  min-height: 100px;
  color: var(--base_gray_100);
  font-size: 14px;
  line-height: 1.6;
  padding: 20px 0;
  box-sizing: border-box;
  overflow-wrap: break-word;
  transform: translateZ(0);
  overflow-y: hidden;
  overflow-x: auto;
}

.xmail-ui-float-scroll-bar.ui-float-scroll-bar-vertical {
  top: 0;
  bottom: 0;
  right: 0;
  width: 12px;
}

.xmail-ui-float-scroll-bar {
  position: absolute;
  z-index: 5;
  cursor: default;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.xmail-ui-float-scroll-bar .ui-float-scroll-thumb {
  position: absolute;
  padding: 2px;
  border: 2px solid transparent;
  box-sizing: border-box;
  border-radius: calc(12px / 2);
  background-color: var(--color-scroll-bar-bg);
  background-clip: padding-box;
}

.xmail-ui-float-scroll-bar.ui-float-scroll-bar-vertical .ui-float-scroll-thumb {
  left: 0;
  right: 0;
}

.xmail-ui-float-scroll-bar .ui-float-scroll-thumb {
  position: absolute;
  padding: 2px;
  border: 2px solid transparent;
  box-sizing: border-box;
  border-radius: calc(12px / 2);
  background-color: var(--color-scroll-bar-bg);
  background-clip: padding-box;
}

.mail-list-page-reader .content-horiz-scroll-bar {
  left: 24px;
  right: 24px;
}

.xmail-ui-float-scroll-bar.ui-float-scroll-bar-disabled {
  pointer-events: none;
}
</style>
